<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">




    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


    <title>3D form</title>

    <link rel="canonical" href="https://codepen.io/ClementRoche/pen/YjXjjJ">




    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: helvetica;
            height: 100vh;
            width: 100vw;
            background: #e90052;
            margin: 0;
            display: flex;
            transition: background 0.5s;
        }

        .scene {
            width: 650px;
            height: 70px;
            /*   margin: 80px; */
            perspective: 400px;
            margin: auto;
            position: relative;
            transition: opacity 0.5s;
            z-index: 2;
        }

        .scene.end {
            opacity: 0;
            transition-delay: 0.25s;
            transition: opacity 0.5s;
            z-index: 0;
        }

        .welcome {
            opacity: 0;
            width: 100%;
            position: absolute;
            height: 100%;
            display: flex;
            transition-delay: 0.25s;
            transition: opacity 0.5s;
        }

        .welcome .content {
            margin: auto;
            font-size: 2rem;
            color: #ffffff;
        }

        .welcome.show {
            opacity: 1;
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
        }

        .steps {
            position: absolute;
            top: 140%;
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .steps .dot {
            width: 15px;
            height: 15px;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 100%;
            margin: 0 10px;
            transition: 0.25s;
        }

        .steps .dot.done {
            background: rgba(255, 255, 255, 0.75);
        }

        .cube__face {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 40px;
            font-weight: bold;
            transition: transform 0.5s;
            opacity: 0;
            background: #ffffff;
            border-radius: 5px;
        }

        .cube__face--front {
            transform: rotateY(0deg) translateZ(35px);
            opacity: 1;
            box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.5);
        }

        .cube__face--top {
            transform: rotateX(90deg) translateZ(35px);
            opacity: 1;
        }

        .cube__face--top .container {
            opacity: 0;
            transition: opacity 0.5s;
        }

        .cube__face--bottom {
            transform: rotateX(-90deg) translateZ(35px);
        }

        .hidden {
            display: none;
        }

        input:not([type="radio"]),
        select {
            display: block;
            margin: 0;
            /*     padding: 0 0 0.15em; */
            /*     padding-left: 50px; */
            width: 100%;
            border: none;
            background-color: transparent;
            color: #202020;
            text-overflow: ellipsis;
            font-weight: normal;
            font-size: 1.5rem;
            height: 100%;
            /* 	padding-right:185px; */
        }

        input:focus,
        select:focus {
            outline: none;
        }

        input::placeholder {
            color: #a0a0a0;
        }

        .cube__face .container {
            height: 100%;
            width: 100%;
            position: relative;
            padding-right: 185px;
            padding-left: 50px;
        }

        div.btn.show {
            opacity: 1 !important;
        }

        div.btn.show span {
            display: block !important;
        }

        div.btn {
            position: absolute;
            right: 10px;
            top: 0;
            height: 100%;
            display: flex;
            transition: opacity 0.25s ease;
            opacity: 0;
        }

        div.btn span {
            color: #e90052;
            font-size: 1.25rem;
            padding: 10px 25px;
            border: 3px solid #e90052;
            border-radius: 40px;
            display: inline-block;
            margin: auto;
            cursor: pointer;
            transition: all 0.25s;
            display: none;
        }

        div.btn span:hover {
            color: #ffffff !important;
            background: #e90052;
        }

        input.label::placeholder {
            color: #202020 !important;
        }

        #step__1 .container,
        #step__6 .container {
            display: flex;
            padding-right: 10px;
        }

        .radio {
            display: flex;
            align-items: center;
        }

        .item {
            width: 46px;
            height: 46px;
            margin: 2px;
            cursor: pointer;
            transition: transform 0.25s;
            border-radius: 4px;
        }

        .item:hover {
            transform: scale(1.2);
        }

        body.blue,
        .item.blue {
            background: #04f5ff;
        }

        body.yellow,
        .item.yellow {
            background: #ebff00;
        }

        body.purple,
        .item.purple {
            background: #e90052;
        }

        body.green,
        .item.green {
            background: #00ff85;
        }

        body.violet,
        .item.violet {
            background: #38003c;
        }

        div.btn.blue span {
            color: #04f5ff;
            border-color: #04f5ff;
        }

        div.btn.blue span:hover {
            background: #04f5ff;
        }

        div.btn.yellow span {
            color: #ebff00;
            border-color: #ebff00;
        }

        div.btn.yellow span:hover {
            background: #ebff00;
        }

        div.btn.purple span {
            color: #e90052;
            border-color: #e90052;
        }

        div.btn.purple span:hover {
            background: #e90052;
        }

        div.btn.green span {
            color: #00ff85;
            border-color: #00ff85;
        }

        div.btn.green span:hover {
            background: #00ff85;
        }

        div.btn.violet span {
            color: #38003c;
            border-color: #38003c;
        }

        div.btn.violet span:hover {
            background: #38003c;
        }

        .right {
            display: flex;
            align-items: center;
        }

        .right label {
            font-size: 1.5rem;
            font-weight: normal;
        }

        .checkbox {
            padding: 4px;
            border: 3px solid #e90052;
            display: inline-block;
            width: 64px;
            border-radius: 40px;
            margin: auto 8px;
        }

        .checkbox .circle {
            height: 25px;
            width: 25px;
            border-radius: 100%;
            background: #e90052;
            display: block;
            transform: translateX(0px);
            transition: transform 0.25s ease, background 0.25s ease;
        }

        .checkbox.checked {
            background: #e90052;
        }

        .checkbox.checked .circle {
            transform: translateX(25px);
            background: white !important;
        }

        .checkbox.blue {
            border-color: #04f5ff;
        }

        .checkbox.blue .circle {
            background: #04f5ff;
        }

        .checkbox.checked.blue {
            background: #04f5ff;
        }

        .checkbox.yellow {
            border-color: #ebff00;
        }

        .checkbox.yellow .circle {
            background: #ebff00;
        }

        .checkbox.checked.yellow {
            background: #ebff00;
        }

        .checkbox.purple {
            border-color: #e90052;
        }

        .checkbox.purple .circle {
            background: #e90052;
        }

        .checkbox.checked.purple {
            background: #e90052;
        }

        .checkbox.green {
            border-color: #00ff85;
        }

        .checkbox.green .circle {
            background: #00ff85;
        }

        .checkbox.checked.green {
            background: #00ff85;
        }

        .checkbox.violet {
            border-color: #38003c;
        }

        .checkbox.violet .circle {
            background: #38003c;
        }

        .checkbox.checked.violet {
            background: #38003c;
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>



</head>

<body translate="no">
<div class="scene">
    <div class="cube">
        <nav class="steps">
            <div class="dot step_1 done"></div>
            <div class="dot step_2"></div>
            <div class="dot step_3"></div>
            <div class="dot step_4"></div>
            <div class="dot step_5"></div>
            <div class="dot step_6"></div>
        </nav>
        <div class="cube__face  cube__face--front" id="step__1">
            <div class="container">
                <input type="text" class="label" placeholder="Please pick a color" disabled="">
                <div class="radio">
                    <div class="item blue" data-color="blue"></div>
                    <div class="item yellow" data-color="yellow"></div>
                    <div class="item purple" data-color="purple"></div>
                    <div class="item green" data-color="green"></div>
                    <div class="item violet" data-color="violet"></div>
                </div>
                <div class="btn" style="display:none">
                    <span data-step="1">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face cube__face--bottom" id="step__2">
            <div class="container">
                <input type="text" placeholder="What's your full name ?">
                <div class="btn">
                    <span data-step="2">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__3">
            <div class="container">
                <input type="email" placeholder="Tell me your email adress">
                <div class="btn">
                    <span data-step="3">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__4">
            <div class="container">
                <input type="password" placeholder="Enter your password (at least 4 chars)">
                <div class="btn">
                    <span data-step="4">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__5">
            <div class="container">
                <select name="fav_color" id="fav_color">
                    <option disabled="" selected="">Select your favorite Ninja Turtle</option>
                    <option value="Leo">Leo</option>
                    <option value="Mikey">Mikey</option>
                    <option value="Donnie">Donnie</option>
                    <option value="Raph">Raph</option>
                </select>
                <div class="btn">
                    <span data-step="5">Continue</span>
                </div>
            </div>
        </div>
        <div class="cube__face" id="step__6">
            <div class="container">
                <input type="text" class="label" placeholder="Are you amazing ?" disabled="">
                <div class="right">
                    <label for="">No</label>
                    <div class="checkbox">
                        <div class="circle"></div>
                    </div>
                    <label for="">Yes</label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="welcome">
    <div class="content">Welcome !</div>
</div>
<!-- <button></button> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://codepen.io/ClementRoche/pen/OrGaMg.js"></script>
<script id="rendered-js">
    API('YjXjjJ');

    const btn = document.querySelectorAll(".btn span");

    for (let i = 0; i < btn.length; i++) {if (window.CP.shouldStopExecution(0)) break;
        btn[i].addEventListener("click", function () {
            document.
            querySelector(
                "nav .dot.step_" + (parseInt(this.getAttribute("data-step")) + 1) + "").

            classList.add("done");
            turn(parseInt(this.getAttribute("data-step")));
        });
    }window.CP.exitedLoop(0);

    function turn(step) {
        if (!!document.querySelector("#step__" + (step - 1))) {
            document.querySelector("#step__" + (step - 1)).classList.add("hidden");
        }

        document.querySelector("#step__" + step).classList.add("cube__face--top");
        document.querySelector("#step__" + step).classList.remove("cube__face--front");

        step += 1;
        if (!!document.querySelector("#step__" + step)) {
            document.querySelector("#step__" + step).classList.add("cube__face--front");
            if (!!document.querySelector("#step__" + step + " input")) {
                document.querySelector("#step__" + step + " input").focus();
            }
            document.
            querySelector("#step__" + step).
            classList.remove("cube__face--bottom");
        }

        step += 1;
        if (!!document.querySelector("#step__" + step)) {
            document.querySelector("#step__" + step).classList.add("cube__face--bottom");
        }
    }

    const colors = document.querySelectorAll(".radio .item");
    const btns = document.querySelectorAll(".btn");

    for (var i = 0; i < colors.length; i++) {if (window.CP.shouldStopExecution(1)) break;
        colors[i].addEventListener("click", function () {
            this.closest(".container").
            querySelector(".btn span").
            click();
            document.body.classList.add(this.getAttribute("data-color"));
            for (var j = 0; j < btns.length; j++) {if (window.CP.shouldStopExecution(2)) break;
                btns[j].classList.add(this.getAttribute("data-color"));
            }window.CP.exitedLoop(2);
            document.
            querySelector(".checkbox").
            classList.add(this.getAttribute("data-color"));
        });
    }window.CP.exitedLoop(1);

    document.querySelector(".checkbox").addEventListener("click", function () {
        this.classList.toggle("checked");
        document.querySelector(".scene").classList.add("end");

        document.querySelector(".welcome").classList.add("show");
    });

    const inputs = document.querySelectorAll(".cube__face input");
    for (let i = 0; i < inputs.length; i++) {if (window.CP.shouldStopExecution(3)) break;
        inputs[i].addEventListener("keyup", function (e) {
            if (this.getAttribute("type") == "text") {
                if (this.value.length > 1) {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.add("show");
                    if (e.keyCode == 13) {
                        this.closest(".container").
                        querySelector(".btn span").
                        click();
                    }
                } else {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.remove("show");
                }
            }
            if (this.getAttribute("type") == "email") {
                if (this.value.length > 2 && this.value.includes("@")) {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.add("show");
                    if (e.keyCode == 13) {
                        this.closest(".container").
                        querySelector(".btn span").
                        click();
                    }
                } else {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.remove("show");
                }
            }
            if (this.getAttribute("type") == "password") {
                if (this.value.length > 3) {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.add("show");
                    if (e.keyCode == 13) {
                        this.closest(".container").
                        querySelector(".btn span").
                        click();
                    }
                } else {
                    this.closest(".container").
                    querySelector(".btn").
                    classList.remove("show");
                }
            }
        });
    }window.CP.exitedLoop(3);

    document.querySelector("select").addEventListener("change", function () {
        this.closest(".container").
        querySelector(".btn").
        classList.add("show");
    });
    //# sourceURL=pen.js
</script>





</body></html>